<!DOCTYPE html>
<html lang="en">
<!-- 公司新闻 -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <style>
        .customer_list li {
            padding: 10px;
        }

        .customer_list_item {
            overflow: hidden;
        }

        .customer_list_item:hover img {
            transform: scale(1.15);
        }

        .customer_list_item img {
            transition: .5s ease;
            width: 100%;
            max-width: 460px;
            object-fit: cover;
            height: 420px;
        }

        .img_collection .button_small_bottom {
            margin: 40px auto 0px auto;
        }

        @media screen and (max-width:768px) {
            .customer_list_item img {
                height: 98px;
            }
            .img_collection .button_small_bottom {
                margin: 20px auto 0px auto;
            }
        }
    </style>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/bootstrap4.5.min.js"></script>
    <script src="../js/swiper-bundle.min.js"></script>

</head>

<body>
    <div class="custome img_collection title_left modular">
        <div class="public_width">
            <div class="public_title">
                <h2>PACKAGE DESIGN</h2>
                <p>包装设计展示</p>
            </div>
            <div class="customer_list">
                <ul class="row">
                    <li class=" col-4">
                        <a href="">
                            <div class="customer_list_item">
                                <img src="../images/product5.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li class=" col-4">
                        <a href="">
                            <div class="customer_list_item">
                                <img src="../images/product5.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li class=" col-4">
                        <a href="">
                            <div class="customer_list_item">
                                <img src="../images/product5.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li class=" col-4">
                        <a href="">
                            <div class="customer_list_item">
                                <img src="../images/product1.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li class=" col-4">
                        <a href="">
                            <div class="customer_list_item">
                                <img src="../images/product7.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li class=" col-4">
                        <a href="">
                            <div class="customer_list_item">
                                <img src="../images/product6.jpg" alt="">
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <a href="" class="button_small button_small_bottom">了解更多</a>
    </div>

</body>

</html>